<template>
  <span v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="拼命加载中...">
    <dg-upload action :http-request="importFile" :show-file-list="false" size="30m" tip-msg="上传文件限制大小为 30M">
      <slot>
        <el-button type="primary">导入</el-button>
      </slot>
    </dg-upload>
  </span>
</template>

<script>
// 引入xlsx
import ztexcel from '@srcPath/utils/zt-excel';
export default {
  name: 'DgExcel',
  props: {
    value: {
      type: [Array, String]
    },
    //属性metadata
    metadata: {
      type: Array,
      default: () => []
    },
    //xlsxParams excel数据读取参数配置
    unique: {
      type: Array,
      default: () => []
    },
    filter: Function,
    xlsxParams: {
      type: Object,
      default() {
        return {
          limitSize: 3, //文件大小限制(单位：MB)
          acceptType: ['xls', 'xlsm', 'xlsx', 'et'] //支持文件类型
        };
      }
    }
  },
  data() {
    return {
      fullscreenLoading: false, // 加载中
      excelData: []
    };
  },
  mounted() {},
  methods: {
    importFile: function(param) {
      // 导入excel
      let params = {
        unique: this.unique,
        xlsxParams: this.xlsxParams,
        filter: this.filter
      };
      ztexcel.importExcel(param.file, this.metadata, params, data => {
        this.$emit('input', data);
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss"></style>
